<template>
  <v-card>
    <v-alert type="info" class="mb-10">
      <div slot="message">
        <div>在通用平台设置最少一列 <span class="blue-text">“列选项禁止隐藏”</span> 为true, 以此列为合计单元格。</div>
        <div>后端返回列表数据最少一个判断条件此行为合计行</div>
        <div>通过<span class="blue-text">onPageLoad、onChangeColumns</span> 事件，加上<span class="blue-text">getColumns、setMergeCells</span> 方法实现</div>
      </div>
    </v-alert>
    <div class="mb-5">
      <v-button-group>
        <v-button @click="$refs.xTable1.showColumnModal()">列选择</v-button>
        <v-button @click="$refs.xTable1.operateRestore()">还 原</v-button>
      </v-button-group>
    </div>
    <vcu-table
      ref="xTable1"
      customModalShow
      show-overflow
      :loadOptions="options"
      height="500"
      @onPageLoad="onPageLoad"
      @onChangeColumns="onChangeColumns"
    >
    </vcu-table>
  </v-card>
</template>
<script>
import XEUtils from "xe-utils";

export default {
  computed: {},
  data() {
    return {
      tableDatas: null,
      options: {
        headUrl: "api/header/lineSubtotal",
        pageUrl: "api/page/lineSubtotal",
        customRender: [
          {
            key: "SFSH00",
            params: {
              slots: {
                default: ({ row }) => {
                  if (row.subtotal) {
                    return [
                      <div class="text-left">
                        小计行：{row.RKLXMC}--{row.JHRQSJ}
                      </div>,
                    ];
                  } else {
                    return [<div>{row.SFSH00}</div>];
                  }
                },
              },
            },
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    handleMergeRows(datas) {
      let _colMergeCells = [];
      const columns = this.$refs.xTable1.getColumns();
      XEUtils.arrayEach(datas, (item, index) => {
        if (item.subtotal) {
          _colMergeCells.push({
            col: 0,
            colspan: columns.length,
            row: index,
            rowspan: 1,
          });
        }
      });
      this.$refs.xTable1.setMergeCells(_colMergeCells);
    },
    onPageLoad({ datas }) {
      this.tableDatas = datas;
      this.handleMergeRows(datas);
    },
    onChangeColumns() {
      this.handleMergeRows(this.tableDatas);
    },
  },
};
</script>
